<template>
<div>
     <row>
        <Col :lg="{span:10}" :md="{span:12}" :sm="{span:16}" :xs="{span:15}">
                <div class="layout-logo" >
                    <!-- <span class="layout-logo-Image"> -->
                        <!-- <h2>云南省蔬菜生产信息监测</h2>
                            <h2>网上填报系统</h2> -->
                    <!-- </span> -->
                    
                </div>
                <Button type="text" @click="toggleClick"  style="float:left">
                    <Icon type="navicon" size="40" color="#FFFFFF"></Icon>
                </Button>

        </Col>
        <Col :lg="{span:5,offset:9}" :md="{span:12}" :sm="{span:8}" :xs="{span:8}" >
                <div class="top_right">
                    <Dropdown trigger="click">
                        <a href="javascript:void(0)">
                            <span class="top_User"> 
                                <Icon type="android-person" size="22"></Icon>&nbsp;{{user.UserName}}&nbsp;<Icon type="arrow-down-b"></Icon>
                            </span>
                        </a>
                        <Dropdown-menu slot="list">
                        <router-link to="/sys/userinfo">
                            <Dropdown-item>
                                <Icon type="person" size="20" color="#239DCE"></Icon>&nbsp;&nbsp;
                                <span class="layout-nav-span">个人信息修改</span>    
                            </Dropdown-item>
                        </router-link>
                        <a href="javascirpt:void(0);" @click="showPwdModal">
                            <Dropdown-item divided>  
                                <Icon type="android-create" size="20" color="#239DCE"></Icon>&nbsp;&nbsp;
                                <span class="layout-nav-span">密码修改</span>
                            </Dropdown-item>
                        </a>                       
                        </Dropdown-menu>
                    </Dropdown> 
                    &nbsp;
                    <a  @click="loginOut" title="安全退出" class="loginOut">【安全退出】<!-- <Icon type="power" size="20" color="#FFFFFF"></Icon> &nbsp;  --></a>         
                </div> 
        </Col>
    </row>
     <Modal v-model="showType" :mask-closable="false" :closable="false">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">密码修改</span>
            </p>
            <div slot="footer">
                <Button type="primary" @click="save('dataModel')">修改</Button>
                <Button type="ghost" @click="cancel('dataModel')" style="margin-left: 8px">取消</Button>
            </div>
            <Form ref="dataModel" :model="dataModel" :rules="ruleValidate" :label-width="80">
                <Form-item label="原始密码" prop="OriginalPwd">
                    <Input type="password" v-model="dataModel.OriginalPwd" placeholder="请输入原始密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="Password">
                    <Input type="password" v-model="dataModel.Password" placeholder="请输入新密码"></Input>
                </Form-item>
                <Form-item label="确认密码" prop="ConfirmPwd">
                    <Input type="password" v-model="dataModel.ConfirmPwd" placeholder="请输入确认密码"></Input>
                </Form-item>
            </Form>
        </Modal>
</div> 
</template>
<script>
    export default{
        props: ['toggleClick'],
        data:function(){
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.dataModel.ConfirmPwd !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.dataModel.validateField('ConfirmPwd');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.dataModel.Password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                currentMenu:'',//当前菜单名称
                UserName: '',//用户名
                MenuList: [],//菜单列表
                ruleValidate: {//数据验证
                    OriginalPwd: [{ required: true, message: '原始密码不能为空!', trigger: 'blur' }],
                    Password: [{ required: true, validator: validatePass, trigger: 'blur' }],
                    ConfirmPwd: [{ required: true, validator: validatePassCheck, trigger: 'blur' }],
                },
                dataModel: {
                    OriginalPwd: '',
                    Password: '',
                    ConfirmPwd: '',
                    UserId: ''
                },
                showType: false,
                spanLeft: 4,
                spanRight: 20,
                BreadcrumbItem: []
            }
        },
         methods: {
            // Updatemenu:function(){//菜单更新
            //     return this.currentMenu;
            // },
            // menuClick:function(name){
            //     this.currentMenu=name;
            //     this.$nextTick(function () {
            //         this.Updatemenu()
            //     })
            // },
            //打开密码修改框
            showPwdModal() {
                var user = this.GetlocaStorage("VegUserInfo");
                this.dataModel.UserId = user.UserId;
                this.showType = true;

            },
            //密码修改
            save(modelname) {
                var self = this;
                this.$refs[modelname].validate((valid) => {
                    if (valid) {
                        this.$http.post('User/PostPassword', this.dataModel).then(
                            function (res) {
                                switch (res.data.status) {
                                    case 0:
                                        self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                                        break;
                                    case 1:
                                        self.$Modal.success({ title: "提示信息", content: res.data.message, desc: false });
                                        break;
                                    case -1:
                                        self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                                        break;
                                }
                            });
                    }
                });
            },
             //取消方法
            cancel(modelname) {
                this.$refs[modelname].resetFields();//重置model
                this.showType = false;//关闭modal
            },
            loginOut() {
                var self = this;
                this.$Modal.confirm({
                    title: '提示信息',
                    content: '<p>确定退出登录吗？</p>',
                    onOk: () => {
                        // self.$http.get('Account').then(function (res) {
                        //     if (res.data.status == 1) {
                        //         self.SetlocaStorage("VegUserInfo", null);//清空缓存数据
                        //         self.SetlocaStorage("arealist", null);//清空缓存数据
                        //         self.SetlocaStorage("dictlist", null);//清空缓存数据
                        //         self.$router.push('/login');//跳转到登录页面   
                        //     }
                        //     else {
                        //         self.$Modal.error({ title: '提示信息', content: res.data.message });
                        //     }
                        // });
                        self.SetlocaStorage("VegUserInfo", null); //清空缓存数据
                        self.SetlocaStorage("arealist", null); //清空缓存数据
                        self.SetlocaStorage("dictlist", null); //清空缓存数据
                        self.SetlocaStorage("token", '');
                        // self.axios.defaults.headers.common["authorization"] = "";
                        self.$router.push("/login"); //跳转到登录页面
                    },
                    onCancel: () => {
                        self.$Modal.remove();
                    }
                });
            },
             checkLogin:function(){//登录检测
                var userInfo=this.GetlocaStorage("VegUserInfo");              
                if(userInfo==null||userInfo==undefined){
                    //如果没有登录状态则跳转到登录页
                    this.$router.push('/login');
                }else{
                    //否则跳转到登录后的页面
                    this.$router.push('/home');
                    }
                }
            },
            computed: {
                iconSize () {//图标大小设置
                    return this.spanLeft === 4 ? 25 : 60;
                },
              user(){//当前用户获取
                return this.GetlocaStorage("VegUserInfo");       
                 
            }   
        },
    } 
</script>